
<template>
  <div id="app">
    <h1>这是一个登陆组件,使用.vue文件定义出来的--{{msg}}</h1>
    <mt-header fixed title="固定在顶部"></mt-header>
    <mt-header title="标题过长会隐藏后面的内容啊哈哈哈哈">
    </mt-header>
    <button @click="show">我是一个按钮</button>
    <mt-tabbar v-model="selected">
      <mt-tab-item id="外卖">
        <img slot="icon" src="./assets/images/1.jpg">
        外卖
      </mt-tab-item>
      <mt-tab-item id="订单">
        <img slot="icon" src="./assets/images/1.jpg">
        订单
      </mt-tab-item>
      <mt-tab-item id="发现">
        <img slot="icon" src="./assets/images/1.jpg">
        发现
      </mt-tab-item>
      <mt-tab-item id="我的">
        <img slot="icon" src="./assets/images/1.jpg">
        我的
      </mt-tab-item>
    </mt-tabbar>
<!--MUI-->
    <button type="button" class="mui-btn">默认</button>
    <button type="button" class="mui-btn mui-btn-primary">蓝色</button>
    <button type="button" class="mui-btn mui-btn-success">绿色</button>
    <button type="button" class="mui-btn mui-btn-warning">黄色</button>
    <button type="button" class="mui-btn mui-btn-danger">红色</button>
    <button type="button" class="mui-btn mui-btn-royal">紫色</button>


  </div>
</template>
<script>
  import { Toast } from 'mint-ui';

  export default {
    data() {
      //注意:组件中的data必须是function
      return {
        msg: "123"
      };
    },
    methods: {
      show(){
        Toast({
          message: '提示',
          position: 'bottom',
          duration: 5000})
      }
    }

  }
</script>

<style lang="scss" scoped>
  #app{
    padding-top:40px;
  }


</style>
